<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>登陆界面</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{background: url("42846c56843811b947609f38bd7fc439.jpg") no-repeat;background-size:cover;font-size: 16px;}
        .form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
    </style>
</head>
<body>
<!--
    基础知识：
    网格系统:通过行和列布局
    行必须放在container内
    手机用col-xs-*
    平板用col-sm-*
    笔记本或普通台式电脑用col-md-*
    大型设备台式电脑用col-lg-*
    为了兼容多个设备，可以用多个col-*-*来控制；
-->
<div class="container">
    <div class="form row">
        <form class="form-horizontal col-sm-offset-3 col-md-offset-3" action="/login">
            <h3 class="form-title"><b>请您登陆个人信息系统</b></h3>
            <div class="col-sm-9 col-md-9">
                <div class="form-group">
                    <label class=" control-label" >用户名:</label>
                    <input class="form-control required" type="text" placeholder="请输入用户名" name="username" autofocus="autofocus" maxlength="20"/>
                </div>
                <div class="form-group">
                    <label class=" control-label" >密码:</label>
                    <input class="form-control required" type="password" placeholder="请输入密码" name="password" maxlength="20"/>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-success pull-right" value="登录 "/>
                </div>
            </div>
        </form>
    </div>
</div>